<template>
  <li class="orderitem" v-if="goods != null">
    <div class="image">
      <img :src="goods.base64"/>
    </div>

    <div class="name">
      {{goods.name}}
    </div>

    <div class="price">
      &nbsp; {{goods.price}}
    </div>

    <div class="count">
      &nbsp;x {{count}}
    </div>
  </li>
</template>

<script lang="ts" setup>
 import { findGoods } from '@/service';
 import { ref, onMounted } from 'vue';
 const props = defineProps({
   goodsid: Number,
   count: Number
 })

 const goods = ref<Goods | null>(null)

 onMounted(async () => {
   let {data} = await findGoods(props.goodsid!)
   goods.value = data
 })
</script>

<style lang="scss" scoped>
 li {
   width: 100%;
   display: flex;
   align-items: center;

   font-size: 16px;
   div.image {
     width: 50px;
     height: 50px;
     img {
       width: 100%;
       height: 100%;
     }
   }
 }
</style>